<template>
  <div class="pop-container">
    <div class="flip-book-container">
      <img
        src="../images/icon-loading.gif"
        alt="loading"
        class="spinImg active-show"
      />
      <div class="close-container">
        <img
          src="../images/close-button.png"
          alt="关闭"
          title="关闭"
          class="close-img"
        />
      </div>
      <div class="magazine-viewport">
        <div class="file-name">FILENAME</div>
        <div class="container">
          <div id="magazine">
            IMAGE LIST
            <!-- Next button -->
            <div ignore="1" class="next-button"></div>
            <!-- Previous button -->
            <div ignore="1" class="previous-button"></div>
          </div>
        </div>
      </div>
      <div class="footer-btn">
        <div class="action-btn">
          <img src="../images/icon-catagory.png" alt="目录" title="目录" />
        </div>
        <div class="action-btn">
          <img src="../images/icon-play.png" alt="自动翻页" title="自动翻页" />
        </div>
        <div class="action-btn">
          <img src="../images/zoom-out.png" alt="放大" title="放大" />
        </div>
        <div class="action-btn">
          <img src="../images/zoom-in.png" alt="缩小" title="缩小" />
        </div>

        <div class="action-btn">
          <img
            src="../images/icon-first.png"
            alt="回到第一页"
            title="回到第一页"
          />
        </div>
        <div class="action-btn">
          <img src="../images/icon-left.png" alt="上一页" title="上一页" />
        </div>
        <div class="page-num">
          <input class="page-input" type="text" id="pageInput" />
        </div>
        <div class="action-btn">
          <img src="../images/icon-right.png" alt="下一页" title="下一页" />
        </div>
        <div class="action-btn">
          <img
            src="../images/icon-last.png"
            alt="跳转到最后一页"
            title="跳转到最后一页"
          />
        </div>
        <div class="action-btn">
          <img src="../images/icon-resize.png" alt="重置" title="重置" />
        </div>
        <div class="action-btn">
          <img src="../images/icon-download.png" alt="下载" title="下载" />
        </div>
        <div class="action-btn">
          <img src="../images/icon-fullscreen.png" alt="全屏" title="全屏" />
        </div>
      </div>

      <div ref="docView"></div>
      <!-- 翻书的音效 -->
      <audio id="audio" src="../images/flipsound.ogg"></audio>

      <!-- Thumbnails -->
      <div class="thumbnails active-hide">
        <div class="thumbnails-header">
          <div class="thumbnails-title">导航</div>
          <div class="icon-close">
            <img src="../images/icon-close.png" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
